<template>
  <div class="box">
    <header>
      <van-search
        shape="round"
        placeholder="搜索鲜花、蛋糕、礼品"
      />
    </header>
    <div class="content">
      <template v-if="flag">
        <van-sidebar v-model="activeKey">
          <van-sidebar-item v-for="(item) of typelist" :key="item.categoryid" :title="item.name" />
        </van-sidebar>
        <div class="rightBar">
          <img :src="typelist[activeKey].img" alt="">
          <ul class="navBar" v-for="(kindlist,index) of this.typelist[this.activeKey].kind" :key="index">
            <h3>{{kindlist.kinds}}</h3>
            <div class="kindlist">
              <template v-if="kindlist.des">
                <li v-for="(item, index) in kindlist.des " :key="index" @click="$router.push('/category/flower/all')">
                  <img :src="item.img" alt="" v-if="item.img">
                  <p>{{ item.alt }}</p>
                </li>
              </template>
              <template v-else-if="kindlist.prices">
                <li v-for="(item, index) in kindlist.prices " :key="index">
                  <p class="text">{{ item }}</p>
                </li>
              </template>
              <template v-else-if="kindlist.count">
                <li v-for="(item, index) in kindlist.count " :key="index">
                  <p class="text">{{ item }}</p>
                </li>
              </template>
            </div>
          </ul>
        </div>
      </template>
    </div>
  </div>
</template>

<script>
import Vue from 'vue'
import { Search, Sidebar, SidebarItem, Image } from 'vant'
import { getCategory } from '@/api'
Vue.use(Search) // 注册Search组件
Vue.use(Sidebar) // 注册Sidebar组件
Vue.use(SidebarItem) // 注册SidebarItem组件
Vue.use(Image) // 注册Image组件
export default {
  data () {
    return {
      flag: false,
      activeKey: 0,
      typelist: []
    }
  },
  mounted () {
    getCategory().then(res => {
      this.flag = true
      this.typelist = res.data.data
      // console.log(this.typelist)
      // console.log(this.typelist[this.activeKey].kind)
    })
  }
}
</script>

<style lang="scss" scoped>
  .content{
    display: flex;
  }

  .rightBar{
    padding: .12rem;
    width: calc(100% - 85px);
    text-align: center;
    img{
      width: 2.72rem;

    }
    .navBar{
      h3 {
        text-align: left;
      }
      .kindlist {
        display: flex;
        flex-wrap: wrap;
        li{
          margin: .08rem 0px;
          width: calc(100%/3);
          img{
            width: .56rem;
          }
          p {
            color: #232628;
          }
          .text {
            background-color: #F7F9FA;
            height: 40px;
            width: 80%;
            margin: auto;
            line-height: 40px;
          }
        }
      }
    }
  }
</style>
